import React from 'react'
import {NumPicker} from '../../../components'
import Actions from './ActionStore/Actions'
import { fetchData } from '../../../components/AjaxConsumer'
import NumberOption from './NumberOption'

import {
    Form,
    Row,
    Col,
    Button,
    DatePicker,
    Input,
    Icon
    
} from 'antd';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;

class QueryOpenOptions extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            confirmDirty: false,
            loading: false,
            exporting: false,
            datevalue: ''
        }
    }

    //阻止输入空格
    handleKeyPress(event){
        if(' '.indexOf(event.key) !== -1){
            event.preventDefault();
        }
    }

    handleReset = () => {
        this.props.form.resetFields();
       // console.log(this.state.clear);
       this.child.onexam();
            
    }
    addDate = (date, days) => {
        var d = new Date(date);
        d.setDate(d.getDate() + days);
        var month = d.getMonth() + 1;
        var day = d.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var val = d.getFullYear() + "-" + month + "-" + day;
        return val;
    }
    handleSubmitOpen = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, fieldsValue) => {
            if (!err) {
                this.setState({loading: true});
                const barcode = fieldsValue['barcode'] ? fieldsValue['barcode'] : '';
                const gmtCreate = fieldsValue['gmtCreate'];
                console.log('表单======= ', gmtCreate!=null&&gmtCreate!='');
               
                //将fieldsValue深拷贝给value
                let values = {

                    'barcode': barcode,
                    'gmtCreateMin': gmtCreate!=null&&gmtCreate!='' ? gmtCreate[0].format('YYYY-MM-DD HH:mm:ss') : "",
                    'gmtCreateMax': gmtCreate!=null&&gmtCreate!='' ? gmtCreate[1].format('YYYY-MM-DD HH:mm:ss') : "",
                };


                console.log('表单提交的值123==23423======= ', values);

                Actions.searchConditionOpen(values);
                setTimeout(() => {
                    this.setState({loading: false})
                }, 1000); //缓冲,防止连击
            }
        });
    };


    //数字类型查询条件
    showNumberOption = (searchColumnItem) => {
        this.refs.NumberOption.showModal(searchColumnItem);
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 8}
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 14}
            }
        };

        const tailFormItemLayout = {
            wrapperCol: {
                xs: {span: 4, offset: 5},
                sm: {span: 4, offset: 5}
            }
        };


        //一行几个 （总宽度24,）
        const colNumber = 6;
        return (
            <div style={{boxShadow: '0px 0px 5px gray'}}>
                <Form
                    onSubmit={this.handleSubmitOpen}
                    style={{
                        backgroundColor: '#fff',
                        paddingTop: '20px'
                    }}>
                    <Row style={{textAlign:'left'}}>
                        <Col span={5}>
                            <FormItem {...formItemLayout} label="条码">
                                {getFieldDecorator('barcode', {
                                    initialValue: '',
                                    rules: []
                                })(<Input disabled={false} onKeyPress={this.handleKeyPress} />)}
                            </FormItem>
                        </Col>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label="入库时间">
                                {getFieldDecorator('gmtCreate', {
                                    //initialValue: '',
                                    rules: [
                                        {
                                            type: 'array', message: 'Please select time!'
                                        }
                                    ]
                                })(
                                    <RangePicker
                                    style={{width:200}}
                                    showTime
                                    format="YYYY-MM-DD HH:mm:ss"
                                    />
                                )}
                            </FormItem>
                        </Col>
                      
                        <Col offset={21} span={3}>
                            <FormItem {...tailFormItemLayout}>
                                <Button type="primary" htmlType="submit"
                                        size="large">{this.state.loading ? '查询中...' : '查询'}
                                </Button>
                               
                            </FormItem>
                        </Col>
                        {/* <Col span={2} style={{ marginLeft: 15 }}>
                            <Button onClick={this.handleReset} size="large" >
                                <Icon type="retweet" /> 清除
                            </Button>
                        </Col> */}
                        
                    </Row>
                </Form>
            </div>
        );
    }
}

export default Form.create()(QueryOpenOptions);